/* 学习目标：useEffect- 挂载后发请求  */
// 前置： npm i  axios
// 前置： utils/request.js

// 1. 封装API
// 2. 挂载后发请求

import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from './api/channel';

export default function App() {
  // 3. 声明变量， 存储数据
  const [list, setList] = useState([]);
  // 💥💥useEffect接收的回调函数， 必须是同步的
  const loadData = async () => {
    const res = await getChannelsAPI();
    setList(res.data.channels);
  };

  useEffect(() => {
    loadData();
  }, []);

  // 4. 列表渲染
  return (
    <div>
      {list.map((item) => {
        return <h3 key={item.id}>{item.name}</h3>;
      })}
    </div>
  );
}
